<template>
	<view class="cntColumn">
		
		
		<ttBar title="活动详情" :bgColor="titleBg" :color="wordsColor" :showZhanwei="false" titleAlign="left" :isShare="isShare">
			<template v-slot:leftCnt>
				<text class="iconfont icon-back lIcon" :style="{'background-color':btnBg}"></text>
			</template>
			<template v-slot:rightCnt>
				<text class="iconfont icon-cart rIcon" :style="{'background-color':btnBg}" @tap="toCar"></text>
				<text class="iconfont icon-home rIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toHome"></text>
			</template>
		</ttBar>

		<goodSwiper :swiperList="goodData.bannerList" :dotsStyles="dotsStyles" :borderRadius="0"></goodSwiper>
		<groupRule :groupDt="groupDt"></groupRule>
		<!-- 价格与标题 -->
		<goodInfo :goodData="goodData" :showPt="false" :showPrice="false"></goodInfo>
		<!-- 课程tag -->
		<goodLabels :labels="goodData.labels" v-if="goodData.labels.length>0"></goodLabels>

		<!-- 课程保障 -->
		<goodGuarantee :protectList="goodData.protectList"></goodGuarantee>
		
		<view class="mainCnt ruleBox">
			<text class="title">拼团规则</text>
			<text class="ruleText">最少2人成团,开课前发生退款不退定金</text>
			<text class="iconfont icon-right"></text>
		</view>

		<!-- 商品评论 -->
		<goodEvaluate :cid="goodData.id" :cname="goodData.name"></goodEvaluate>
		
		<!-- 店铺卡片 -->
		<shop-card :shopInfo="goodData.store"></shop-card>

		<courseParameter :goodParameter="goodData" :shichang="shichang"></courseParameter>
		
		<view class="htmlBox">
			<!-- 图文详情 -->
			<text class="parameterTitle">课程详情</text>
			<goodCnt :goodData="goodData"></goodCnt>
			<!-- 须知 -->
			<goodXuzhi :goodData="goodData"></goodXuzhi>
		</view>
		<pintuanBottom :resouceData="groupDt"></pintuanBottom>
		
		<shareAction ref="shareAction"></shareAction>
		
		<!-- 登录的新组件 -->
		<uni-popup ref="popup" type="center" mask-click="false" @touchmove.stop.prevent="moveHandle">
			<newlogin @tap="close"></newlogin>
		</uni-popup>
	</view>
</template>


<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import goodSwiper from "@/pagesA/components/goodSwiper/goodSwiper.vue";
	import statusBar from "@/components/statusBar/statusBar.vue";
	import goodEvaluate from "@/pagesA/components/goodEvaluate/goodEvaluate.vue";
	import courseParameter from "@/pagesA/components/courseParameter/courseParameter.vue";
	import goodLabels from "@/pagesA/components/goodItem/goodLabels.vue";
	import goodGuarantee from "@/pagesA/components/goodItem/goodGuarantee.vue";
	import goodInfo from "@/pagesA/components/goodItem/goodInfo.vue";
	import goodCnt from "@/pagesA/components/goodItem/goodCnt.vue";
	import goodXuzhi from "@/pagesA/components/goodItem/goodXuzhi.vue";
	import pintuanBottom from "@/pagesA/components/goodItem/pintuanBottom.vue";
	import COMM from "@/common/common.js";
	import shopCard from "@/pagesA/components/shopCard/shopCard.vue";
	import groupRule from "@/pagesA/components/groupList/groupRule.vue";
	import shareAction from "@/pagesA/components/shareAction/shareAction.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {

		components: {
			ttBar,
			goodSwiper,
			statusBar,
			goodEvaluate,
			courseParameter,
			shopCard,
			groupRule,
			shareAction,
			goodLabels,
			goodGuarantee,
			goodInfo,
			goodCnt,
			goodXuzhi,
			pintuanBottom
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				initInfo:state=>state.sys.initInfo
			})
		},
		data() {
			return {
				videoHeight: uni.getSystemInfoSync().screenWidth,
				titleBg: 'rgba(255,255,255,0)',
				wordsColor: '#FFFFFF',
				btnBg:'rgba(0,0,0,0.5)',
				goodData: {
					name:'课程名称',
					price:0,
					labels:[],
					leftSeconds:10,
					stock:1
				},
				shopInfo:{},
			
				dotsStyles: {
					width: 6,
					height: 4,
					bottom: -10,
					backgroundColor: '#c5c3c6',
					border: 'none',
					selectedBackgroundColor: '#ff6902',
					selectedBorder: 'none',
					borderRadius: 2
				},
				shichang:'',
				id:0,
				gid:0,
				groupDt:{
					level1:1,
					level2:2,
					level3:3,
					course:{
						price:0
					}
				},
				isShare:0
			};
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open();
				
			},
			close() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.close();
				
			},
			moveHandle(){
				return;
			},
			getData() {
				uni.showLoading({
					title:"正在加载中"
				})
				if(uni.getStorageSync("toGood")){
					this.goodData=uni.getStorageSync("toGood")
				}
				this.$store.dispatch("apiGetGroupDetailpt",{
					id:this.gid,
					userId:this.isLogin?this.userInfo.userId:0
				}).then(res=>{
					
					this.groupDt=res.data.data;
					this.goodData = res.data.data.course;
					this.shichang=COMM.getTm(this.goodData.time);
					this.shopInfo=res.data.data.course.store;
					uni.hideLoading()
				})
			},
			
			
			toCar(){
				if (this.isLogin) {
					this.toPage("car")
				} else {
					// this.toPage({
					// 	url:'login',
					// 	to:'car'
					// })
					this.open();
				}
			},
			
			toHome(){
				this.toPage({
					url:'index'
				})
			},
			// 分享功能
			share(){
				uni.$emit("showShare",{
					type:4,		//拼团1 课程2  店铺3  活动4
					id:this.gid
				})
				this.$refs.shareAction.open()
			},
			
		},
		onLoad(cfm) {
			// 监听页面返回事件
			uni.$on('update', function(data) {
				console.log(data);
			})
			this.gid=cfm.id;
			this.isShare=cfm.isShare?parseInt(cfm.isShare):0
			this.getData();
			
			// 自动登录
			// 判断能不能获取到本地存储的'token'		
			if (uni.getStorageSync('token')) {	
				this.$store.dispatch("apiUserAutoLogin", {
					token: uni.getStorageSync('token')
				}).then(res => {
					
					setTimeout(() => {
						this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {
							setTimeout(() => {
								this.$store.dispatch("timEditInfo", {
									nick: res.data.data.nickname,
									role: 2
								})
							}, 1000)
						})
						let _data={
								userId:res.data.data.userId,
								city:parseInt(this.locationCity.adcode),
								version:'MP'
							};
						this.$store.dispatch("eidtUserInfo",_data)
					}, 500)
				}).catch(res => {
					 
				})
			}
			

		},
		onShow(){
			this.getData();
		},
		onUnload() {

		},
		onShareAppMessage(res) {
			let _href='';
			if(this.isLogin){
				_href='pagesA/groupDetail/groupDetail?id=' + this.gid+'&uid='+this.userInfo.userId + '&isShare=1'
			}else{
				_href='pagesA/groupDetail/groupDetail?id=' +this.gid + '&isShare=1'
			}
			return {
				title:'正在拼团 '+ this.goodData.name,
				path: _href,
				imageUrl:this.goodData.img
			}
		},
		onPageScroll(e) {
			var _this = this;
			if (e.scrollTop > this.videoHeight) {
				this.titleBg = 'rgba(255,255,255,1)';
				this.wordsColor = "#000000";
				this.btnBg="rgba(255,255,255,1)";
			} else {
				this.titleBg = 'rgba(255,255,255,0)';
				this.wordsColor = "#FFFFFF";
				this.btnBg="rgba(0,0,0,0.5)";
			}
			uni.$on("loginNext",()=>{
				
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F4F4F4;
	}
	.cntColumn{
		display: flex;
		flex-direction: column;
	}

	/* #ifdef MP */
	.titleBg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

	}

	.goodTitle {
		position: fixed;
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		left: 0;
		padding-right: 28%;
		box-sizing: border-box;
		font-size: 36upx;
	}

	.backBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		left: 28upx;
	}

	.carBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		right: 28%;
	}

	/* #endif */


	.mainCnt {
		padding: 0 28upx;
	}
	
	.ruleBox{
		display: flex;
		background-color: #FFFFFF;
		padding: 20upx 28upx;
		border-bottom: 13upx solid #f4f4f4;
		font-size: 32upx;
		align-items: center;
		.title{
			font-size: 30rpx;
			color: #2c2c2c;
			margin-right: 30upx;
		}
		.ruleText{
			font-size: 24upx;
			flex-grow: 1;
			text-align: right;
			color: #f93d3d;
		}
	}

	

	.htmlBox {
		padding: 18upx 28upx 180upx 28upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		.parameterTitle {
			font-size: 32rpx;
			font-weight: bold;
			color: #202932;
		}
		.dtText{
			margin-bottom: 20upx;
			font-size: 32upx;
			color: #202932;
		}
	}
	

	
	.icon-gouwuche{
		font-size: 48upx;
	}
	.rIcon{
		font-size: 44upx;
		font-weight: normal;
		margin-left: 20upx;
		width: 70upx;
		height: 70upx;
		background-color: rgba(0,0,0,0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
		
	}
	.lIcon{
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		background-color: rgba(0,0,0,0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}
</style>
